<template>
  <div class="stepBox">
    <div class="left">
      <el-steps direction="vertical" :active="active" finish-status="success">
        <el-step title=" " />
        <el-step title=" " />
        <el-step title=" " />
      </el-steps>
    </div>
    <div class="right">
      <carousel-txt-list
        class="list-box"
        :showList="showList"
        :slidesPerView="9"
        :viewHight="720"
      ></carousel-txt-list>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useStore } from "../../store/index.ts";
import CarouselTxtList from "../../components/carouselTxtList/index.vue";

const store = useStore();
const active = ref(0);
const addNum = ref(0);
const showList = ref([{}, {}, {}, {}, {}, {}, {}, {}, {}, {}]);
const addList = [
  {
    time: "04:10:12",
    val: "实测水位 581.1m",
  },
  {
    time: "04:30:13",
    val: "实测水位 582.7m",
  },
  {
    time: "04:50:26",
    val: "实测水位 584.8m",
  },
  {
    time: "05:10:22",
    val: "实测水位 586.3m",
  },
  {
    time: "05:30:55",
    val: "实测水位 588.9m",
  },
  {
    time: "05:50:30",
    val: "实测水位 590.3m",
  },
  {
    time: "06:10:20",
    val: "实测水位 591.0m",
  },
  {
    time: "06:30:18",
    val: "实测水位 593.2m",
  },
  {
    time: "06:50:03",
    val: "实测水位 595.4m",
  },
  {
    time: "07:10:09",
    val: "实测水位 597.0m",
  },
  {
    time: "07:13:17",
    val: "实测水位 597.6m",
    span: "预警",
  },
  {
    time: "07:30:14",
    val: "实测水位 598.0m",
  },
  {
    time: "07:50:53",
    val: "实测水位 598.2m",
  },
  {
    time: "08:10:46",
    val: "实测水位 598.8m",
  },
  {
    time: "08:30:22",
    val: "实测水位 599.0m",
  },
  {
    time: "08:50:32",
    val: "实测水位 599.2m",
  },
  {
    time: "09:10:28",
    val: "实测水位 599.6m",
  },
  {
    time: "09:30:59",
    val: "实测水位 599.8m",
  },
  {
    time: "09:50:01",
    val: "实测水位 600.3m",
  },
  {
    time: "10:10:12",
    val: "实测水位 600.7m",
  },
  {
    time: "10:30:25",
    val: "实测水位 601.6m",
  },
  {
    time: "10:50:33",
    val: "实测水位 601.9m",
  },
  {
    time: "11:10:43",
    val: "实测水位 602.1m",
    span: "漫坝",
  },
  {
    time: "11:30:57",
    val: "实测水位 602.1m",
  },
  {
    time: "11:50:20",
    val: "实测水位 602.1m",
  },
  {
    time: "12:10:10",
    val: "实测水位 602.1m",
  },
];
onMounted(() => {
  setInterval(() => {
    showList.value[addNum.value] = addList[addNum.value];
    addNum.value++;
  }, 4000);
  setTimeout(() => {
    active.value = 2;
  }, 50000);
  setTimeout(() => {
    active.value = 3;
  }, 98000);
});
const getKml = () => {
  // 显示kml
  store.showKml = true;
};
</script>

<style lang="less" scoped>
.stepBox {
  width: 100%;
  height: 100%;
  display: flex;

  .left {
    width: 20%;
    height: 100%;
  }

  .right {
    flex: 1;
    display: flex;
    .list-box {
      flex: 1;
    }
  }
}
</style>
